/*
* @Author: Yejing
* @Date: 2023-06-09 13:33:29
* @LastEditors: WangXi
* @LastEditTime: 2023-06-25 10:18:30
* @Description: 设置 - 根据用户权限显示响应密码设置
*/

<template>

	<view class="settingInfo-page">
		<c-layout>
			<!-- 头部 -->
			<c-navigation-bar slot="head" :title="$t('settingInfo.settings')">
			</c-navigation-bar>
			<!-- 设置按钮框组 -->
			<view class="container-box button-group">
				<view class="avatarBox" v-if="false">
					<u-avatar
						:src='vuex_user_info.avatar?$u.file.getMedieUrl(vuex_user_info.avatar):$u.file.getMedieUrl(vuex_userDefaultTopImg)'
						mode='square' size="200" @click="changeAvatar"></u-avatar>
					<view class="avatarName">
						{{ vuex_user_info.nickName }}
					</view>
				</view>
				<template v-for="(item,index) in buttonListType">
					<u-button v-if="item.show" :key="index" :text="item.text" @click="buttonClick(index)">
						<img class="country" :src="country" v-if="index==0">
						{{ item.text }}
						<u-icon name="arrow-right" size="35rpx">
						</u-icon>
					</u-button>
				</template>
			</view>
			<!-- 底部 -->
			<view slot="footer" class="bootom">
				<!-- <text class="version">{{ $t('settingInfo.versionNo') }}{{ version }}</text> -->
				<u-button @click="loginOut()" type="primary" :text="$t('settingInfo.logOut')">
					{{ $t('settingInfo.logOut') }}
				</u-button>
			</view>
		</c-layout>

		<!-- 弹出层 -->
		<u-popup mode="bottom" v-model="popup" @close="closeEvent" @open="openEvent" :round="10">
			<view class="popup-info" v-if="popupIndex==0">
				<view class="language-list" v-for="(item,index) in languageAll" :key="item.code"
					@click='languageListClick(item,index)'>
					<img class="country" :src="item.imgSrc" :alt="$t('settingInfo.logOut')">{{ item.name }}
					<u-icon color="#2979ff" name="checkbox-mark" v-show="activeLan==index?'active-lan':''"></u-icon>
				</view>
			</view>
		</u-popup>

		<modal :show='modal.show' :content='modal.content' @confirmClick='confirmClick' @cancelClick='cancelClick'>
		</modal>
	</view>
</template>

<script>
	import {chatLogout} from '@/common/tx_im.js'
	export default {
		data() {
			return {
				//搜索
				search: {
					navThmen: 'line',
					navPlaceholder: 'Donate for',
					navType: 'navBackTitle',
					title: this.$t('settingInfo.settings')
				},
				//设置按钮框组
				buttonList: [{
						text: this.$t('settingInfo.chinese')
					}, {
						text: this.$t('settingInfo.setUserInfo')
					}, {
						text: this.$t('settingInfo.cPasswordLogin')
					}, {
						text: this.$t('settingInfo.AgentPasswordModif'),
					},
					/* {
						text: this.$t('settingInfo.StoreWithdrawalPassword'),
						key: 'isStorekeeper',
					}, {
						text: this.$t('settingInfo.AnchorWithdrawalPassword'),
						key: 'isAnchor',
					}, */
					// {
					// 	text: this.$t('settingInfo.closeAccount')
					// }
				],
				version: '1.0.0.3',
				country: undefined,
				// 弹出层
				popup: false,
				popupIndex: '',
				languageAll: [{
						name: this.$t('settingInfo.chinese'),
						code: 'zh-Hans',
						imgSrc: ''
					},
					{
						code: 'en',
						name: this.$t('settingInfo.english'),
						imgSrc: ''
					}
				],
				activeLan: undefined,
				//提示框
				modal: {
					show: false,
					content: ''
				},
				modaltype: '',


			}
		},
		onLoad() {
			this.defaultLanguage()
		},
		computed: {
			userType() {
				return this.$store.getters.userStatus
			},
			buttonListType() {
				// 使用show属性决定显示
				const arr = this.buttonList.map(f => {
					const show = f.key ? this.userType[f.key] : true
					return {
						...f,
						show
					}
				})
				return arr
			}
		},
		methods: {
			changeAvatar() {
				uni.navigateTo({
					url: '/pages/searchInfo/components/anchorCard/anchorHomepage/bubble/editAvator'
				})
			},
			//按钮组点击
			buttonClick(index) {
				this.popupIndex = index
				console.log(index)
				switch (index) {
					case 0:
						this.openEvent()
						break;
					case 1:
						uni.navigateTo({
							url: '/pages/searchInfo/components/anchorCard/anchorHomepage/bubble/edit',
							"animationType": "slide-in-right",
							"animationDuration": 300
						})
						break;
					case 2:
					case 3:
					case 4:
					case 5:
						this.pwdHandel(index)
						break;
					case 6:
						this.modal.show = true
						this.modal.content = this.$t('settingInfo.doAccount')
						this.modaltype = 'accountCancellation'
						break;
				}
			},
			// 点击设置密码的一个统一处理
			async pwdHandel(code) {
				const type = code - 2
				let set = true
				//  0 为账户密码所以不验证密码
				if (type != 0) {
					if (type == 2) {
						this.$u.post('/app/shop/password/status').then(res => {
							set = res.data
							// 传递设置密码的类型及是否已经设置密码
							uni.navigateTo({
								url: '/pages/modify/modify?type=' + type + '&set=' + ~~set,
								"animationType": "slide-in-right",
								"animationDuration": 300
							})
						})

					} else {
						set = await this.$u.api.verifyIsSetPwdAjax(type - 1)
						// 传递设置密码的类型及是否已经设置密码
						uni.navigateTo({
							url: '/pages/modify/modify?type=' + type + '&set=' + ~~set,
							"animationType": "slide-in-right",
							"animationDuration": 300
						})
					}
				} else {
					uni.navigateTo({
						url: '/pages/modify/modify?type=' + type + '&set=' + ~~set,
						"animationType": "slide-in-right",
						"animationDuration": 300
					})
				}


			},
			//关闭语言弹框
			closeEvent() {
				this.popup = false
				location.reload()
			},
			//打开语言弹框
			openEvent() {
				this.popup = true
			},
			//语言切换
			languageListClick(item, index) {
				//#ifndef H5
				if (this.vuex_is_android) {
					uni.showModal({
						content: this.$t('local.languageChangeConfirm'),
						success: (res) => {
							if (res.confirm) {
								uni.setLocale(item.code);
							}
						}
					})
				} else {
					uni.setLocale(item.code);
					this.$i18n.locale = item.code;

				}
				//#endif
				uni.setLocale(item.code);
				this.$i18n.locale = item.code;
				this.activeLan = index
				this.defaultLanguage()
			},
			//登出
			loginOut() {
				this.modal.show = true
				this.modal.content = this.$t('settingInfo.doLogOut')
				this.modaltype = 'loginOut'

			},
			//确认
			confirmClick() {
				let url = undefined
				if (this.modaltype == 'loginOut') {
					url = '/app/loginOut'
				} else {
					url = '/app/user/logoff'
				}
				this.$u.post(url, {}).then(res => {
					this.modal.show = false
					uni.setStorageSync('personalStep1', JSON.stringify( {
					firstName: '',
					name: '',
					phone: '',
					phoneCode: '',
					cardFrontUrl: '',
					cardTheBackUrl: '',
					documentType: '2',
					photoUrl: '',
					phoneCountryCode: 1,
				},))
					chatLogout()
					uni.setStorageSync('personalStep2', JSON.stringify({
						shopName: '',
						shopAvatarUrl: '',
						profile: '',
						intro: '',
						shopAddress: '',
						workScene: null
					}))
					uni.setStorageSync('isAccomplishps1', 0)
					uni.setStorageSync('isAccomplishps2', 0)
					// this.$u.vuex('vuex_token', '')
					uni.removeStorageSync('vuex_token');
					this.$u.vuex('vuex_address_info', {})

					uni.reLaunch({
						url: '/pages/login/login'
					})
				})

			},
			//取消
			cancelClick() {
				this.modal.show = false
			},
			//默认语言格式
			defaultLanguage() {
				for (var i = 0; i < this.languageAll.length; i++) {
					if (this.languageAll[i].code == uni.getLocale()) {
						this.activeLan = i
						this.buttonList[0].text = this.languageAll[i].name
						this.country = this.languageAll[i].imgSrc
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.settingInfo-page {
		font-family: SFUIDisplay-Regular-Regular, SFUIDisplay-Regular;
		.button-group {

			.u-btn {
				justify-content: left;
				margin-bottom: 60rpx;
				height: 116rpx;
				color: #999CAD;

				&::after {
					border: 1px solid #E8E6EA;
					border-radius: 60rpx;
				}
			}

			.avatarBox {
				text-align: center;

				.avatarName {
					height: 42rpx;
					font-size: 36rpx;
					font-family: SFUIDisplay-Medium, SFUIDisplay;
					font-weight: 500;
					color: #000000;
					line-height: 42rpx;
					margin: 42rpx 0;
				}
			}

			.u-icon {
				position: absolute;
				right: 30rpx;
			}
		}

		.bootom {
			padding-bottom: 40rpx;

			uni-button {
				width: 90%;
			}
		}

		.version {
			text-align: center;
			width: 100%;
			display: inline-block;
			margin-bottom: 60rpx;

		}

		.popup-info {
			padding: 60rpx 30rpx 40rpx 30rpx;

			.language-list {
				padding-bottom: 20rpx;
				border-bottom: 2rpx solid #E8E6EA;
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
				padding: 10px;
			}

			.active-lan {
				background: #E8E6EA;
				border-radius: 30rpx;
			}

			.u-icon {
				position: absolute;
				right: 40rpx;
			}
		}


		.country {
			width: 50rpx;
			margin-right: 10rpx;
		}

	}
</style>